<template>
    <div class="right-box-card" >
      <div id="basic">
        <!-- 体成分数据分析 -->
        <div style="">
        <div style=" width: 100%; background-color:#FF5C82;  text-align: center; margin:auto">
          <div style="font-size: 40px; font-weight: bold; color: #ffffff;padding-top:20px;">{{ Titlename }}</div>
          <!-- <span style="font-size: 30px; color: #666666; margin-left: 20px;display: block;">基本信息报告</span> -->
          <div style="margin-top:30px;font-size: 24px;padding-bottom: 20px;font-weight: bold;color:#333333;">孕产妇营养风险评估与干预报告单</div>
        </div>
      </div>
          
          <!-- <div style=" page-break-after:inherit;"></div> -->
            <!-- 基本信息 -->
          <div style="width: 100%; height: 40px; background-color: #FF5C82; margin-top: 10px; display: flex;">
            <div><img src="../../assets/img/12.jpg" style="height: 40px" alt="" /></div>
            <div style="font-size: 20px; margin-left: 10px; line-height: 40px; color: #fff;">孕妇基本信息</div>
          </div>
          <div style="width: 1070px; border-top: 2px solid #FF5C82; border-right: 2px solid #FF5C82;  margin-top: 10px">
            <div style="display: flex">
              <div
                style="background-color: #FF5C82; width: 9.9%;height: 40px;text-align: center;line-height: 40px;color: #fff;border-right: 2px solid #FF5C82;border-bottom: 2px solid #FF5C82;">
                检测日期</div>
              <div
                style="width: 90%; height: 40px; border-bottom: 2px solid #FF5C82; line-height: 40px; text-indent: 20px;">
                {{ report_time }}
              </div>
            </div>
            <div style="display: flex">
              <div
                style="background-color: #FF5C82; width: 10%;height: 40px;text-align: center;line-height: 40px;color: #fff;border-right: 2px solid #FF5C82;border-bottom: 2px solid #FF5C82;">
                孕妇姓名
              </div>
              <div
                style="width: 15%;height: 40px;text-align: center;line-height: 40px;border-right: 2px solid #FF5C82;border-bottom: 2px solid #FF5C82;">
                {{ contents.username ?? '[]' }}
              </div>
              <div
                style="background-color: #FF5C82;width: 10%; height: 40px; text-align: center; line-height: 40px; color:#fff; border-right: 2px solid #FF5C82; border-bottom: 2px solid #FF5C82;">
                手机号
              </div>
              <div
                style="width: 15%; height: 40px; text-align: center;line-height: 40px;border-right: 2px solid #FF5C82; border-bottom: 2px solid #FF5C82;">
                {{ contents.guardian_mobile  ?? '[]' }}
              </div>
              <div
                style="background-color: #FF5C82; width: 10%; height: 40px; text-align: center; line-height: 40px; color:#fff; border-right: 2px solid #FF5C82; border-bottom: 2px solid #FF5C82;">
                年龄
              </div>
              <div
                style="width: 15%;height: 40px;text-align: center;line-height: 40px;border-right: 2px solid #FF5C82;border-bottom: 2px solid #FF5C82;">
                {{ contents.age ?? '[]' }}岁
              </div>
              <div
                style=" background-color: #FF5C82; width: 10%; height: 40px; text-align: center; line-height: 40px;color:#fff; border-right: 2px solid #FF5C82;border-bottom: 2px solid #FF5C82;">
                身高
              </div>
              <div
                style="width: 15%;height: 40px;text-align: center;line-height: 40px;border-bottom: 2px solid #FF5C82;">
                {{ contents.height ?? '[]' }}CM
              </div>
            </div>
            <div style="display: flex">
              <div
                style="background-color: #FF5C82;width: 10%;height: 40px;text-align: center; line-height: 40px;color:#fff;border-right: 2px solid #FF5C82;border-bottom: 2px solid #FF5C82;">
                体重
              </div>
              <div
                style=" width: 15%; height: 40px; text-align: center; line-height: 40px; border-right: 2px solid #FF5C82; border-bottom: 2px solid #FF5C82; ">
                {{ contents.weight ?? '[]' }}KG
              </div>
              <div
                style="background-color: #FF5C82;width: 10%;height: 40px;text-align: center; line-height: 40px;color:#fff;border-right: 2px solid #FF5C82;border-bottom: 2px solid #FF5C82;">
                孕周数
              </div>
              <div
                style=" width: 15%; height: 40px; text-align: center; line-height: 40px; border-right: 2px solid #FF5C82; border-bottom: 2px solid #FF5C82; ">
                {{ contents.gestational_weeks ?? '[]' }}周
              </div>
              <div
                style="background-color: #FF5C82;width: 10%;height: 40px;text-align: center; line-height: 40px;color:#fff;border-right: 2px solid #FF5C82;border-bottom: 2px solid #FF5C82;">
                末次月经
              </div>
              <div
                style=" width: 15%; height: 40px; text-align: center; line-height: 40px; border-right: 2px solid #FF5C82; border-bottom: 2px solid #FF5C82; ">
                {{ contents.pre_weight ?? '[]' }}
              </div>
              <div
                style="background-color: #FF5C82;width: 10%;height: 40px;text-align: center; line-height: 40px;color:#fff;border-right: 2px solid #FF5C82;border-bottom: 2px solid #FF5C82;">
                预产期
              </div>
              <div
                style="width: 15%;height: 40px;text-align: center;line-height: 40px;border-bottom: 2px solid #FF5C82;">
                {{ contents.edc ?? '[]' }}
              </div>
            </div>
            <div style="display: flex">
              <div
                style="background-color: #FF5C82;width: 10%;height: 40px;text-align: center; line-height: 40px;color:#fff;border-right: 2px solid #FF5C82;border-bottom: 2px solid #FF5C82;">
                多胎
              </div>
              <div
                style=" width: 15%; height: 40px; text-align: center; line-height: 40px; border-right: 2px solid #FF5C82; border-bottom: 2px solid #FF5C82; ">
                {{ contents.twin ?? '[]' }}
              </div>
              <div
                style="background-color: #FF5C82;width: 10%;height: 40px;text-align: center; line-height: 40px;color:#fff;border-right: 2px solid #FF5C82;border-bottom: 2px solid #FF5C82;">
                腹围
              </div>
              <div
                style=" width: 15%; height: 40px; text-align: center; line-height: 40px;  border-bottom: 2px solid #FF5C82; ">
                {{ contents.abdominal_girth ?? '[]' }}
              </div>
              <div
                style="width: 10%;height: 40px;text-align: center; line-height: 40px;color:#fff;border-bottom: 2px solid #FF5C82;">
              
              </div>
              <div
                style=" width: 15%; height: 40px; text-align: center; line-height: 40px; border-bottom: 2px solid #FF5C82; ">
               
              </div>
              <div
                style="width: 10%;height: 40px;text-align: center; line-height: 40px;color:#fff;border-bottom: 2px solid #FF5C82;">
              
              </div>
              <div
                style="width: 15%;height: 40px;text-align: center;line-height: 40px;border-bottom: 2px solid #FF5C82;">
               
              </div>
            </div>
           
          </div> 
    
          <div style="width: 100%;height: 40px;background-color:#FF5C82;margin-top: 20px;display: flex;">
            <div><img src="../../assets/img/13.jpg" style="height: 40px" alt="" /></div>
            <div style="font-size: 20px;margin-left: 10px;line-height: 40px;color:#fff;">
              体成分数据分析
            </div>
          </div>
           <ChildViewprint></ChildViewprint>
      </div>
    </div>
    </template>
    
    <script setup>
    import ChildViewprint from '../common/GravidaViewcomposition.vue';
    import {defineComponent, onMounted, ref, watch, reactive} from 'vue'
    import {ElMessage} from "element-plus";
    import http from "../../utils/http";
    import {useRoute, useRouter} from "vue-router"
    const route = useRoute()
    const router = useRouter()
    const labName = ref()
    const groupId = ref()
    const id = ref()
    const reportId = ref()
    const Titlename=ref()
    
    const username = ref()
    const guardian = ref()
    const birthStatus = ref()
    const contents = ref({})
    const onBmishow = ref(1)
    const birth = ref()
    const info = ref({});
    const  fatHigh = ref(false)
    const  fatNormal = ref(false)
    const  fatLow = ref(false)
    const  WaistHigh = ref(false)
    const  WaistNormal = ref(false)
    const  WaistLow = ref(false)
    const  EdemaHigh = ref(false)
    const  EdemaNormal = ref(false)
    const  EdemaLow = ref(false)
    const  proteinHigh = ref(false)
    const  proteinNormal = ref(false)
    const  proteinLow = ref(false)
    const  FatHigh = ref(false)
    const  FatNormal = ref(false)
    const  FatLow = ref(false)
    const  FatHighNormal = ref(true)
    const hospital_name = ref()
    const report_time = ref()
    
    import PrintJS from 'print-js'
    
    const onHome = async () => {
      await router.push({'path': '/Home'})
    }
    const fetchData = async () => {
    Titlename.value=localStorage.getItem('Title');
      setTimeout(() => {
            print('print-all')
          }, 2000)
      if(route.params.groupId) {
        groupId.value = route.params.groupId
        id.value = route.params.id
        reportId.value = route.params.reportId
    
        username.value = route.params.username
        guardian.value = route.params.guardian
        birthStatus.value = route.params.birth
        if(groupId.value === 3) {
          labName.value = '婴幼儿营养测评'
        } else if(groupId.value === 5) {
          labName.value = '孕产妇营养测评'
        } else if(groupId.value === 6) {
          labName.value = '成年人营养测评'
        } else if(groupId.value === 7) {
          labName.value = '慢性病营养测评'
        } else {
          labName.value = '婴幼儿营养测评'
        }
        
        http.get('api/archives/viewreport?id='+ reportId.value+'&username='+ username.value+'&guardian='+ guardian.value+'&birth='+ birthStatus.value).then((res)=>{
          hospital_name.value = res.data.data.hospital_name
          report_time.value = res.data.data.times
           contents.value = res.data.data.contents;
             birth.value = res.data.data.contents.birth;
        })
    
        http.get('api/archives/viewReportMember?id='+ reportId.value+'&username='+ username.value+'&guardian='+ guardian.value+'&birth='+ birthStatus.value).then((res)=> {
          if (res.data.code === 0) {
            ElMessage.error(res.data.msg)
          }
          report_time.value = res.data.data.times
           contents.value = res.data.data.contents;
           
        })
    
        http.get('api/report/getreport?id='+id.value+'&reportId='+ reportId.value+'&username='+ username.value+'&guardian='+ guardian.value+'&birth='+ birthStatus.value).then((res)=>{
          if(res.data.code === 0) {
            ElMessage.error(res.data.msg)
          }
    
    
          let data = res.data.data.component;
          info.value.Fat = data.Fat;
          info.value.FatMin = data.FatMin;
          info.value.FatMax = data.FatMax;
    
          info.value.Bone = data.Bone;
          info.value.BoneMin = data.BoneMin;
          info.value.BoneMax = data.BoneMax;
    
          info.value.Protein = data.Protein;
          info.value.ProteinMin = data.ProteinMin;
          info.value.ProteinMax = data.ProteinMax;
    
          info.value.Water = data.Water;
          info.value.WaterMin = data.WaterMin;
          info.value.WaterMax = data.WaterMax;
    
          info.value.Weight = data.Weight;
          info.value.WeightMin = data.WeightMin;
          info.value.WeightMax = data.WeightMax;
    
          info.value.LBM = data.LBM;
          info.value.LBMMin = data.LBMMin;
          info.value.LBMMax = data.LBMMax;
    
          info.value.Muscle = data.Muscle;
          info.value.MuscleMin = data.MuscleMin;
          info.value.MuscleMax = data.MuscleMax;
    
          info.value.ICW = data.ICW;
          info.value.ICWMin = data.ICWMin;
          info.value.ICWMax = data.ICWMax;
    
          info.value.PBF = data.PBF;
          info.value.PBFMin = data.PBFMin;
          info.value.PBFMax = data.PBFMax;
    
          info.value.SMM = data.SMM;
          info.value.SMMMin = data.SMMMin;
          info.value.SMMMax = data.SMMMax;
    
          info.value.BMI = data.BMI;
          info.value.BMIMin = data.BMIMin;
          info.value.BMIMax = data.BMIMax;
    
          info.value.WHR = data.WHR;
          info.value.WHRMin = data.WHRMin;
          info.value.WHRMax = data.WHRMax;
    
          info.value.Weight_control = data.Weight_control;
          info.value.Fat_control = data.Fat_control;
          info.value.Muscle_control = data.Muscle_control;
          // 内脏指数
          info.value.VFI = data.VFI;
          info.value.VFIMin = data.VFIMin;
          info.value.VFIMax = data.VFIMax;
          // 水中系数
          info.value.Edema = data.Edema;
          info.value.EdemaMin = data.EdemaMin;
          info.value.EdemaMax = data.EdemaMax;
          // 细胞外液
          info.value.ECW = data.ECW;
          // 基础代谢
          info.value.BMR = data.BMR;
          // 身体水分率
          // info.value.Water = (data.Water * 100).toFixed(2);
          if (data.PBF < data.PBFMin) {
            fatHigh.value = true;
          } else if (data.PBF >= data.PBFMin && data.PBF <= data.PBFMax) {
            fatNormal.value = true;
          } else if (data.PBF > data.PBFMax) {
            fatLow.value = true;
          }
    
          if (data.WHR < data.WHRMin ) {
            WaistHigh.value = true;
          } else if (data.WHR >=  data.WHRMin  && data.WHR <=  data.WHRMax) {
            WaistNormal.value = true;
          } else if (data.WHR >  data.WHRMax) {
            WaistLow.value = true;
          }
          // 水肿指标
          if (data.Edema < data.EdemaMin) {
            EdemaHigh.value = true;
          } else if (data.Edema >= data.EdemaMin && data.Edema <= data.EdemaMax) {
            EdemaNormal.value = true;
          } else if (data.Edema > data.EdemaMax) {
            EdemaLow.value =true;
          }
          // 蛋白质
          if (data.Protein < data.ProteinMin) {
            proteinHigh.value = true;
          } else if (data.Protein >= data.ProteinMin && data.Protein <= data.ProteinMax) {
            proteinNormal.value = true;
          } else if (data.Protein > data.ProteinMax) {
            proteinLow.value =true;
          }
          //脂肪
          if (data.Fat < data.FatMin) {
            FatHigh.value = true;
          } else if (data.Fat >= data.FatMin && data.Protein <= data.FatMax) {
            FatNormal.value = true;
          } else if (data.Fat > data.FatMax) {
            FatLow.value =true;
          }
    
          // 处理指标参数
          info.value.Weightkeyword = '✔ 正常';
          info.value.Weightcolor = 'everyBlack';
          if ( data.Weight < data.WeightMin) {
            info.value.Weightkeyword = '▼ 不足';
            info.value.Weightcolor = 'everyRed';
          } else if( data.Weight >  data.WeightMax) {
            info.value.Weightkeyword = '▲ 超标';
            info.value.Weightcolor = 'everyOrange';
          }
    
          info.value.Musclekeyword = '✔ 正常';
          info.value.Musclecolor = 'everyBlack';
          if ( data.Muscle < data.MuscleMin) {
            info.value.Musclekeyword = '▼ 不足';
            info.value.Musclecolor = 'everyRed';
          } else if( data.Muscle >  data.MuscleMax) {
            info.value.Musclekeyword = '▲ 超标';
            info.value.Musclecolor = 'everyOrange';
          }
    
          info.value.PBFkeyword = '✔ 正常';
          info.value.PBFcolor = 'everyBlack';
          if ( data.PBF < data.PBFMin) {
            info.value.PBFkeyword = '▼ 不足';
            info.value.PBFcolor = 'everyRed';
          } else if( data.PBF >  data.PBFMax) {
            info.value.PBFkeyword = '▲ 超标';
            info.value.PBFcolor = 'everyOrange';
          }
    
          info.value.Bonekeyword = '✔ 正常';
          info.value.Bonecolor = 'everyBlack';
          if ( data.Bone < data.BoneMin) {
            info.value.Bonekeyword = '▼ 不足';
            info.value.Bonecolor = 'everyRed';
          } else if( data.Bone >  data.BoneMax) {
            info.value.Bonekeyword = '▲ 超标';
            info.value.Bonecolor = 'everyOrange';
          }
    
          info.value.Waterkeyword = '✔ 正常';
          info.value.Watercolor = 'everyBlack';
          if ( data.Water < data.WaterMin) {
            info.value.Waterkeyword = '▼ 不足';
            info.value.Watercolor = 'everyRed';
          } else if( data.Water >  data.WaterMax) {
            info.value.Waterkeyword = '▲ 超标';
            info.value.Watercolor = 'everyOrange';
          }
    
          info.value.SMMkeyword = '✔ 正常';
          info.value.SMMcolor = 'everyBlack';
          if ( data.SMM < data.SMMMin) {
            info.value.SMMkeyword = '▼ 不足';
            info.value.SMMcolor = 'everyRed';
          } else if( data.SMM >  data.SMMMax) {
            info.value.SMMkeyword = '▲ 超标';
            info.value.SMMcolor = 'everyOrange';
          }
    
          info.value.BMIkeyword = '✔ 正常';
          info.value.BMIcolor = 'everyBlack';
          if ( data.BMI < data.BMIMin) {
            info.value.BMIkeyword = '▼ 不足';
            info.value.BMIcolor = 'everyRed';
          } else if( data.BMI >  data.BMIMax) {
            info.value.BMIkeyword = '▲ 超标';
            info.value.BMIcolor = 'everyOrange';
          }
    
          info.value.WHRkeyword = '✔ 正常';
          info.value.WHRcolor = 'everyBlack';
          if ( data.WHR < data.WHRMin) {
            info.value.WHRkeyword = '▼ 不足';
            info.value.WHRcolor = 'everyRed';
          } else if( data.WHR >  data.WHRMax) {
            info.value.WHRkeyword = '▲ 超标';
            info.value.WHRcolor = 'everyOrange';
          }
    
    
         
    
        })
      } else {
        ElMessage.error('栏目编号不得为空')
        await router.push({'path': '/Home'})
      }
    }
    
    onMounted(() => {
      fetchData()
    })
    </script>
    
    <style scoped>
    .right-box-card{
      margin-left: 0%;
      margin-top: 0%;
      position: static;
      top: calc(0px);
      width: 100%;
    
    }
    #basic .title {
      font-size: 36px;
      width: 100%;
      text-align: center;
    }
    #basic #createTime {
      font-size: 16px;
      color:#999999;
      float: right;
    }
    
    .params {
      width: 100%;
      font-size: 22px;
      font-weight: bold;
    }
    
    .shu {
      width: 5px;
      height: 30px;
      background: #FF5C82;
      opacity: 1;
      border-radius: 100px;
      float: left;
      margin-right: 2%;
      margin-left: 3%;
    }
    #analMan {
      margin-top: 2%;
      text-align: center;
      color: #fff;
      width: 60%;
      float:left;
    
    }
    #analMan #imgMan {
      float: left;
    }
    #analMan #imgFat {
      margin-left: 33%;
      width: 269px;
      height: 35px;
      line-height: 35px;
      background: #E88F73;
      opacity: 1;
    }
    #analMan #imgBone {
      margin-left: 33%;
      width: 269px;
      height: 53px;
      line-height: 53px;
      background: #B1D964;
      opacity: 1;
    }
    #analMan #imgProtein {
      margin-left: 33%;
      width: 269px;
      height: 53px;
      line-height: 53px;
      background: #E8BA73;
      opacity: 1;
    }
    #analMan #imgWater {
      margin-left: 33%;
      width: 269px;
      height: 193px;
      line-height: 193px;
      background: #6BA9E4;
      opacity: 1;
    }
    #right_1 {
      float:left;
      background: url('../../assets/img/analysis_man_right_1.png');
      width: 269px;
      height: 327px;
      margin-top: 26px;
      color: #fff;
      text-align: right;
      font-size: 12px;
    }
    #right_2 {
      float:left;
      background: url('../../assets/img/analysis_man_right_2.png');
      width: 268px;
      height: 294px;
      margin-top: 16px;
      color: #fff;
      text-align: right;
    }
    #right_3 {
      float:left;
      background: url('../../assets/img/analysis_man_right_3.png');
      width: 206px;
      height: 247px;
      margin-top: 30px;
      color: #fff;
      text-align: right;
    }
    #right_4 {
      float:left;
      background: url('../../assets/img/analysis_man_right_4.png');
      width: 160px;
      height: 196px;
      margin-top: 36px;
      color: #fff;
    }
    #right_5 {
      float:left;
      background: url('../../assets/img/analysis_man_right_5.png');
      width: 86px;
      height: 75px;
      margin-top: 105px;
      color: #fff;
    }
    
    .right_content {
      text-align: right;
      padding-right: 7px;
      padding-top: 20px;
    }
    #basic {
      font-size: 16px;
      width: 1075px;
      min-height: 1244px;
      overflow: hidden;
      padding: 0;
      word-break:break-all;
      /*margin: 60px auto 0 auto;*/
      box-shadow: var(--el-box-shadow-light);
      border-radius: var(--el-card-border-radius);
      background-color: var(--el-card-bg-color);
      /* color: var(--el-text-color-primary); */
      transition: var(--el-transition-duration);
      --el-card-border-color: var(--el-border-color-light, #ebeef5);
      --el-card-border-radius: 4px;
      --el-card-padding: 20px;
      --el-card-bg-color: var(--el-color-white);
    }
    
    .Basic {
      margin-top: 20px;
    }
    #BasicAssessment {
    }
    #BasicAssessment .bt {
      background: #F7F7F7;
      color: #fff;
    }
    
    #BasicAssessment .bt span {
      width: 25%;
      float: left;
      text-align: center;
      color: #999999;
      line-height: 30px;
    }
    
    #BasicAssessment ul li {
      width: 100%;
      display: inline-block;
      margin: 0;
    }
    
    #BasicAssessment .element span {
      width: 25%;
      float: left;
      text-align: center;
      line-height: 60px;
    }
    #WeightAssessment {
      width: 30%;
    }
    #Obesity {
      background: url('../../assets/img/analysis_man_right_round.png');
      width: 122px;
      height: 122px;
      color:#fff;
      font-size: 12px;
      margin-left: 10%;
    
    }
    #ObesityContent{
      margin-left: 50%;
    }
    #ObesityRight{
      float: left;
      width: 35%;
      margin-left: 5%;
    }
    #ObesityRight ul li {
      border:1px solid #eee;
      width: 310px;
      height: 55px;
      font-size: 18px;
      color: #999999;
      background: #F7F7F7;
      line-height: 55px;
      list-style-type:none;
      text-align: right;
      margin-left: -30px;
    }
    #ObesityRight ul .weight_run {
    
    }
    #ObesityRight ul li .weight_param{
      color: #333333;
      padding-right: 30%;
    }
    #Obesity #ObesityFat {
      float: left;
      margin-top: 45%;
      margin-left: 20%;
    }
    #Obesity #ObesityProtein {
      margin-top: 25%;
      margin-left: 60%;
    }
    .analysis_waist{
      float: left;
      width: 33%;
    }
    .fen {
      width: 129%;
      height: 30px;
      box-sizing: border-box;
      margin-top: 30px;
      margin-left: -15%;
    }
    .fenss {
      text-align: center;
    }
    #viscus {
      margin-top: 9px;
      margin-left: 5.5%;
      color: #333333;
      font-size: 18px;
      width: 100%;
    }
    .ViscusNumber {
      font-size: 50px;
      color: #E8B973;
    }
    
    .ViscusType {
      font-size: 16px;
      color: #fff;
      width: 100px;
      height: 68px;
      border-radius: 30px;
      background: #E8B973;
      padding: 0 20px;
      margin-left: 20px;
    }
    
    .ViscusNormal {
      font-size: 16px;
      color: #fff;
      width: 100px;
      height: 68px;
      border-radius: 30px;
      background: green;
      padding: 0 20px;
      margin-left: 20px;
    }
    
    .ViscusLow {
      font-size: 16px;
      color: #fff;
      width: 100px;
      height: 68px;
      border-radius: 30px;
      background: red;
      padding: 0 20px;
      margin-left: 20px;
    }
    
    .fen .fenssNumber {
      width: 100%;
    }
    .fen .fenssNumber .six {
      width: 2%;
      text-align: left;
      color: #999999;
      font-size: 14px;
    }
    .fen .fenssNumber span {
      width: 32.33%;
      float: left;
      text-align: right;
      color: #999999;
      font-size: 14px;
    }
    .Intracellular {
      position: absolute;
      margin-top:40px;
      margin-left:80px;
      width: 55px;
      height: 59px;
      font-size: 12px;
      color:#fff;
      -moz-transform: rotate(-70deg);
      -webkit-transform: rotate(-70deg);
      display: block;
      filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3)
    }
    
    .ECF {
      position: absolute;
      margin-top:17px;
      margin-left:179px;
      width: 55px;
      height: 59px;
      font-size: 12px;
      color:#fff;
      -moz-transform: rotate(30deg);
      -webkit-transform: rotate(30deg);
      display: block;
      filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3)
    }
    .other{
      position: absolute;
      margin-top:160px;
      margin-left:209px;
      width: 55px;
      height: 59px;
      font-size: 12px;
      color:#fff;
      -moz-transform: rotate(-40deg);
      -webkit-transform: rotate(-40deg);
      display: block;
      filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3)
    }
    .BodyMoisture {
      position: absolute;
      margin-top:80px;
      margin-left:140px;
      color:#999999;
      font-size: 12px;
    }
    .BodyMoisture span{
      font-size: 18px;
      font-weight:bold;
      color: #333333;
    }
    #edema {
      padding-top: 5%;
      margin-left: 40%;
      font-size: 18px;
      color: #666666;
    }
    #edema span{
      font-size: 50px;
    }
    #edemaType {
      margin-left: 40%;
      width: 500px;
      background: red;
    }
    #edemaType span{
      text-align: center;
      float: left;
      width: 120px;
    }
    #Nutritional {
      margin-left: 6%;
    }
    #Nutritional span{
      font-size: 25px;
      color:#FF5C82;
    }
    
    .everyRed {
      color:red;
    }
    
    .everyOrange {
      color:orange;
    }
    
    .everyBlack {
      color:#333333;
    }
    
    </style>
    